<template>
    <view class="ask_title">
        <text class="title">{{ item.reporterName }}提交的外出报备申请</text>
        <text :style="{background:col[item.status]}" class="status">{{ sta[item.status] }}</text>
    </view>
    <view class="reason_box">
        <text class="out_reason">外出事由</text>
        <text class="reason">{{ item.reason }}</text>
    </view>
    <view class="outTime">
        <text class="time">外出时间</text>
        <view class="startEnd">
            <view class="start">开始: {{ item.outTime }}</view>
            <view class="end">结束: {{ item.returnTime }}</view>
        </view>
    </view>
</template>
  
<script setup>
import { ref } from 'vue'
defineProps(['item'])
const sta = ref({
    '0': '未提交',
    '1': '待审核',//审核中
    '2': '已通过',
    '3': '未通过',
    '4': '已撤销',
})
const col = {
  '0':'#f9ae3d',
  '1':'#f9ae3d',
  '2':'#5ac725',
  '3':'#f56c6c',
  '4':'#c6c7cb'
}
</script>
  
<style lang="scss">
.reason_box {
    color: #666666;
    font-size: 26rpx;
    margin-bottom: 10rpx;

    .reason {
        margin-left: 30rpx;
    }
}

.outTime {
    display: flex;
    color: #666666;
    font-size: 26rpx;

    .startEnd {
        margin-left: 30rpx;
    }
}

.ask_title {
    display: flex;
    margin-bottom: 16rpx;

    .status {
        display: flex;
        align-items: center;
        padding: 2rpx 10rpx;
        background-color: #F9C457;
        border-radius: 12rpx;
        color: #fff;
        margin-left: 10rpx;
        font-size: 24rpx;
        transform: scale(.9);
    }

    .pass {
        background-color: #0dbea8;
    }

    .nopass {
        background-color: red;
    }

    .title {
        font-size: 32rpx;
        color: #333;
    }
}
</style>
  